<!-- 询价管理详情 -->
<template>
  <basic-container>
    <el-button size="medium" @click="back">返回</el-button>
    <div class="item-title">询价单信息</div>
    <el-descriptions style="width: 60%; margin-top: 10px" column="1">
      <el-descriptions-item label="询价单编号">{{
        enquiryVO.fagrmntid044 || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="询价描述">{{
        enquiryVO.fagrmntid044Text || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="询价有效期">{{
        `${enquiryVO.rfqStart || "-"} 至 ${enquiryVO.rfqEnd || "-"}`
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="币别">{{
        enquiryVO.docCurrency || "-"
      }}</el-descriptions-item> -->
      <el-descriptions-item label="货运协议有效期">{{
        `${enquiryVO.validityStartTs || "-"} 至 ${
          enquiryVO.validityEndTs || "-"
        }`
      }}</el-descriptions-item>
      <el-descriptions-item label="询价响应截止日期">{{
        enquiryVO.responseEnd || "-"
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="item-title">组织信息</div>
    <el-table :data="enquiryOrgVO" border style="width: 30%; margin-top: 10px">
      <el-table-column prop="orgUnit" label="组织单位"> </el-table-column>
      <el-table-column prop="orgUnitText" label="组织单位描述">
      </el-table-column>
    </el-table>
    <div class="item-title">询价项目信息</div>
    <el-table :data="enquiryItemVO" border style="width: 80%; margin-top: 10px">
      <el-table-column prop="itemNo" label="询价项目"> </el-table-column>
      <el-table-column prop="docCurrency" label="币别"> </el-table-column>
      <el-table-column prop="tccsId047Text" label="计算单描述">
      </el-table-column>
      <el-table-column prop="tcet084Text" label="费用类型描述">
      </el-table-column>
      <el-table-column prop="rateId" label="费率表"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-view"
            @click.stop="view(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      class="inquiry-btn"
      v-if="
        enquiryVO.enquiryStatus != 'abolished' &&
        enquiryVO.enquiryStatus != 'finish'
      "
    >
      <el-button
        type="primary"
        size="medium"
        v-if="isAdmin"
        @click="closeInquiry"
        >结束</el-button
      >
      <el-button
        type="primary"
        size="medium"
        style="margin-left: 60px"
        v-if="enquiryVO.enquiryStatus != 'toBeQuoted'"
        @click="submitInquiry"
        >确认提交</el-button
      >
    </div>
    <div v-else class="inquiry-footer"></div>
    <itemDetails ref="itemDetails" />
  </basic-container>
</template>

<script>
import { getDetails, submit, close } from "@/api/inquiry/index";
import itemDetails from "../itemDetails";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      enquiryVO: {},
      id: "",
      enquiryOrgVO: [],
      enquiryItemVO: [],
    };
  },
  components: { itemDetails },
  computed: {
    ...mapGetters(["permission"]),
    //控制承运商账号不显示
    isAdmin() {
      return this.vaildData(this.permission.tms_inquiry_carrier, false);
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.init();
  },
  methods: {
    init() {
      getDetails(this.$route.query.id).then((res) => {
        const data = res.data.data;
        this.enquiryVO = data.enquiryVO;
        this.enquiryOrgVO = data.enquiryOrgVO;
        this.enquiryItemVO = data.enquiryItemVO;
      });
    },
    view(row) {
      this.$refs.itemDetails.open(
        this.id,
        row.id,
        row.itemNo,
        this.enquiryVO.enquiryStatus
      );
    },
    closeInquiry() {
      this.$confirm("是否确定结束该询价，结束后承运商将无法继续报价?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          close(this.id).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init();
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {});
    },
    submitInquiry() {
      this.$confirm("是否确定提交该询价?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          submit(this.id).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init();
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {});
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.inquiry-btn {
  margin: 20px 0;
  display: flex;
  justify-content: flex-end;
  width: 80%;
}
.item-title {
  font-size: 16px;
  font-weight: 700;
  padding: 20px 0;
  color: #18acff;
  border-bottom: 1px solid #18acff;
  width: 30%;
}
.inquiry-footer {
  width: 80px;
  height: 80px;
}
</style>
